<template>
  <div class="warp">
    <div class="menu ">
      <ul class="clear-float">
        <li><a href="javaScript:void(0)" class="submenu-item">菜单一</a></li>
        <li><a href="javaScript:void(0)" class="submenu-item">菜单一</a></li>
        <li><a href="javaScript:void(0)" class="submenu-item">菜单一</a></li>
        <li><a href="javaScript:void(0)" class="submenu-item">菜单一</a></li>
      </ul>
    </div>
    <div>
      <button size="small">按钮</button>
      <button size="small" v-admin="admin">根据条件渲染的按钮</button>
      <el-input placeholder="role.." v-focus></el-input>
      <p>当前role: {{role}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "DisplayTest",
        role: ''
      }
    },
    directives: {
      admin: {
        update(el, binding) {
          if (this.role !== binding.valueOf()) {
            el.parentNode.removeChild(el);
          }
        }
      },
      focus: {
        inserted: function (el) {
          el.focus();
        }
      }
    }
  }
</script>

<style scoped>

  .el-input {
    width: 50%;
  }

  .warp {
    width: 1080px;
    height: 500px;
    box-shadow: 0px 2px 4px 4px #FFFFCC;
  }

  .menu {
    width: 100%;
    background-color: #8c939d;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 300px;
    background-color: #5daf34;
    font-size: 0;

  }

  li {
    display: inline-block;
    width: 25%;
    text-align: center;
    /*background-color: #3a8ee6;*/
    font: 16px 华文细黑;
  }

  .clear-float:after, .clear-float:before {
    display: block;
    height: 0;
    clear: both;
    content: "";
  }

  a {
    text-decoration: none;
    display: block;
    width: 100%;
  }

  a:hover {
    background-color: #8c939d;
  }
</style>
